<template>
  <div>
    <div class="topgoods">
      <p class="goodnum">小店当前会员数 : {{ goodNum }}</p>
      <el-input placeholder="输入手机号搜索" v-model="query.keyword" clearable size='small' class="goodsname">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="searchGoods"></i>
      </el-input>
      <!-- <el-input placeholder="输入会员id搜索"
        v-model="id"
        clearable
        size='small'
        class="goodsname">
        <i slot="suffix"
          class="el-input__icon el-icon-search"
          @click="searchGoods"></i>
      </el-input> -->
    </div>
    <div class="record_line"></div>

    <el-table :data="tableData" style="width:100%" max-height="680" :cell-style="tc" :header-cell-style="tccolor">


      <el-table-column prop="uid" label="会员id"></el-table-column>
      <el-table-column prop="nickName" label="会员昵称" width="160"></el-table-column>
      <!-- <el-table-column prop="realname" label="会员姓名"></el-table-column> -->
      <el-table-column prop='sexText' label='性别'></el-table-column>
      <el-table-column prop='birth' label='生日'>
        <template slot-scope="scope">
          <p v-if="scope.row.birth">{{ scope.row.birth }}</p>
          <p v-else>未知</p>
          <!-- <p v-if='scope.row.status == 0'>已到期</p> -->
        </template>
      </el-table-column>
      <el-table-column prop='mobile' label='手机号'></el-table-column>
      <el-table-column prop='orderNum' label='消费次数（本店）'></el-table-column>
      <el-table-column label='账号状态'>
        <template slot-scope="scope">
          <p>{{ scope.row.statusText }}</p>
          <!-- <p v-if='scope.row.status == 0'>已到期</p> -->
        </template>
      </el-table-column>
      <el-table-column prop='useStartTime' label='激活时间（本店）'>
        <template slot-scope="scope">
          <p>{{ parseTime(scope.row.useStartTime) }}</p>
          <!-- <p v-if='scope.row.status == 0'>已到期</p> -->
        </template>
      </el-table-column>

    </el-table>
    <!--
   @size-change="handleSizeChange" -->
    <el-col :span="24">
      <div class="pagination">

        <el-pagination background @current-change="pageChange" :current-page="query.pageNum" :page-size="query.pageSize"
          layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
import { shopVipRelationPageSizeList } from "@/api/store"
export default {
  props: ['shopId'],
  data() {
    return {
      goodNum: 0,
      id: '',
      mobile: '',
      page: 1,
      total: 0,
      tableData: [],
      query: {
        pageNum: 1,
        pageSize: 10,
        sellerId: this.shopId
        // keyword:''
        // sellerId:0,
        // productId:0,
        // productName:0
      }
    }
  },
  mounted() {
    this.getshopVipSearchData(this.shopId)
  },
  watch: {
    shopId(newValue) {
      if (newValue) {
        this.getshopVipSearchData(this.shopId)
      }
    }
  },
  methods: {
    async getshopVipSearchData(shopId) {
      var url = "page=" + this.page +
        "&id=" + this.id +
        "&mobile=" + this.mobile +
        "&shopId=" + shopId
      let res = await shopVipRelationPageSizeList(this.query)
      this.goodNum = res.data.total
      this.tableData = res.data.list
      this.total = res.data.total
    },

    searchGoods() {
      this.query.pageNum = 1
      this.getshopVipSearchData(this.shopId)
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },

    isUseActivityChange(id, e) {
      //更新成功后重新获取商品
      // this.getshoptypeopenorclose(id, e);
      console.log('id:' + id + ',e:' + e)
    },
    pageChange(page) {
      this.query.pageNum = page;
      this.getshopVipSearchData(this.shopId)
    },
  }
}
</script>

<style lang="scss" scoped>
.topgoods {
  height: 30px;

  .goodnum {
    float: left;
    width: 200px;
  }

  .goodsname {
    float: right;
    width: 200px;
    margin-top: -5px;
  }
}

.record_line {
  margin: 10px 0;
  height: 1px;
  background-color: #e6e6e6;
}

.doing {
  color: blue;
}

.success {
  color: green;
}

.failure {
  color: red;
}

.operate_info {
  float: left;
}

.status—desc {
  float: right;
}

.pagination {
  float: right;
  margin-top: 15px;
}
</style>
